<template>
	<view class="sl-tab-list-body"  v-if="goods.length" :style="{height:(height==0? '100%' : height+'px')}">
		<!-- 导航 -->
		<scroll-view class="menu-wrapper" scroll-y :scroll-with-animation="true" :scroll-top="menuSTop" >
			<view style="position: relative;" v-for="(item,index) in goods" :key="index" ref="menuList" 
			@click="select(index)"
			:class="{'current': currentIndex == index}">
				<view class="menu-item">{{item.name}}</view>
				<text class="allcount" v-if="getAllCount(item)> 0">{{ getAllCount(item) }}</text>
			</view>
		</scroll-view>
		<!-- 商品 -->
		<scroll-view class="foods-wrapper" scroll-y 
			:scroll-top="foodSTop" 
			:scroll-with-animation="isFoodScrollanimation"
			@scroll="foodsScroll"
		>
			<view ref="foodsWrapper">
				<view ref="foodList" class="foods" v-for="(item, i) in goods" :key="i">
					<view class="food-title" > {{item.name}} </view>
					<view class="food" v-for="(food, index) in item.foods" :key="index">
						<image class="food-image" :src="food.img"  @click="onClick(food)"></image>
						<view class="food-info">
							<text style="font-size: 15px;margin-top:0px;line-height: 20px;" @click="onClick(food)">
								{{food.name}}
							</text>
							<text style="font-size: 12px;color:#868686;line-height:16px;" @click="onClick(food)" >
								<text v-if="datas.show_stock" style="margin-right: 10px;">库存 {{food.stock || 0}} </text>  月售 {{food.sell_count || 0}}
							</text>
							<view style="display: flex;justify-content: space-between;position: relative;" >
								<text class="food-price" @click="onClick(food)">
									￥{{food.price}}
									<text class="food-primeCost" v-if="food.old_price != food.price">
										￥{{food.old_price}}
									</text>
								</text>
								<cartcontrol :food="food" @add="addCart" @dec="decreaseCart" style="margin-top:3px;position: absolute;right: 0;"></cartcontrol>
							</view>
							<text class="fracture" v-if="showFracture(food.discount_desc)"  @click="onClick(food)">
								<text class="icon">折</text>{{food.discount_desc}}
							</text>
							<text class="reduce" v-if="showReduce(food)"  @click="onClick(food)">
								<text class="icon">减</text>{{showReduce(food)}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view style="height:60px;"></view>
		</scroll-view>
		<!-- 购物车 -->
		<shopcart class="shopcart" 
			:goods="goods" 
			:deliveryFee="deliveryFee"
			:satisfy="satisfy"
			@add="addCart" 
			@dec="decreaseCart" 
			@delAll="delAll" 
			@settlement="settlement"
		></shopcart>
	</view>
</template>

<script>
	import Vue from 'vue'
	import cartcontrol from '@/components/sl-ui/sl-tamp/cartcontrol.vue'
	import shopcart from '@/components/sl-ui/sl-tamp/shopcart.vue'
	import uniNoticeBar from '@/components/uni-ui/uni-notice-bar/uni-notice-bar.vue'
	import config from '@/config/config'
	import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue'
	export default {
		name: 'sl-tab-list',
		components: {
			cartcontrol,
			shopcart,
			uniNoticeBar,
			uniLoadMore
		},
		data() {
			return {
				foodSTop: 0,
				menuSTop:0,
				currentIndex:0,
				isFoodScrollanimation:true,
				goods:this.datas.goods || [],
				slides:this.datas.slides || [],
				notices:this.datas.notices || [],
			};
		},
		props: {
			datas: {
				type: Object,
				default: function () {
				    return []
				}
			},
			height:{
				type: Number,
				default: function () {
				    return 0;
				}
			},
		},
		computed:{
			deliveryFee: function(){
				return this.datas.delivery_fee || 0
			},
			satisfy: function(){
				return this.datas.delivery_price || 0
			}
		},
		watch: { /*监听数据的变化*/
			datas: {//监听对象
				handler: function (newVal) {
					this.goods = newVal.goods || [];
					this.slides = newVal.slides || [];
					this.notices = newVal.notices ? newVal.notices : [];
					this.show_stock = newVal.show_stock;
				},
				deep: true
			},
			goods: { //监听对象
				handler: function (newVal) {
					this.$emit('dataUpdate',{
						goods:newVal,
						slides:this.slides,
						notices:this.notices,
						delivery_fee:this.deliveryFee,
						delivery_price:this.satisfy,
						show_stock:this.show_stock
					});
				},
				deep: true
			}
		},
		mounted() {
			
		},
		methods: {
			// 选择
			select(index){
				this.selectClick = true;
				this.currentIndex = index;
				this.setScrollH(index,'.foods');
				this.setScrollH(index,'.menu-item');
			},
			// 菜单滚动条
			foodsScroll(e){
				let that = this;
				let index = 0;
				let scrollTop = e.detail.scrollTop;
				let height = 0;
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.foods').boundingClientRect(function(foods){
					for (let i = 0; i < foods.length; i++) {
						if( height <= scrollTop + 135 ){
							index = i;
							height += parseInt(foods[i].height);
						}
					}
					if(that.selectClick != true){
						that.currentIndex = index;
						that.setScrollH(index,'.menu-item');
					}else{
						that.selectClick = false;
					}
				}).exec();
				if( that.height + e.detail.scrollTop >= e.detail.scrollHeight - 1 && (e.detail.deltaY || -1)<0){
					clearInterval( that.timoutide || 0);
					that.timoutide =  setTimeout(function(){
						that.$emit('pagingPage',e,that.currentIndex);
					}, 50);
				}
			},
			// 设置点击侧边栏右边滚动的高度
			setScrollH: function(index,_class) {
				let that = this;
				let height = 0;
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(_class).boundingClientRect(function(foods){
					if (index == 0) { that.foodSTop = 0; }
					for (let i = 0; i < index; i++) {
						height += parseInt(foods[i].height);
					}
					if(_class == '.foods'){
						that.foodSTop = height;
					}else {
						that.menuSTop = height -that.height / 2;
					}
				}).exec();
			},
			// 显示折扣
			showFracture(description){
				if(description){
					return  true;
				}else{
					return  false;
				} 
			},
			// 显示满减
			showReduce(food){
				if(food.satisfy && food.reduce){
					return '满'+food.satisfy+"减"+food.reduce;
				}else{
					return '';
				}
			},
			// 获得购物车所有商品数量
			getAllCount: function(item) {
				let count = 0;
				item.foods.forEach((food) => {
					if (food.count >= 0) {
						count += food.count
					}
				});
				return count;
			},
			// 添加
			addCart: function(item) {
				if(this.datas.show_stock && item.count + 1 > item.stock){
					uni.showToast({icon: 'none',title: '库存不足！'});
					return false;
				}
				if (item.count >= 0) { item.count++; }
				this.goods.forEach((good,goodIndex) => {
					good.foods.forEach((food,foodIndex) => {
						if (item.id && item.id == food.id){
							Vue.set(food, 'count', item.count >= 0 ? item.count : 1);
						}
					})
				});
			},
			// 删除
			decreaseCart(item) {
				if (item.count) {
					item.count--
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.id && item.id == food.id)
								Vue.set(food, 'count', item.count);
						})
					})
				}
			},
			// 清空购物车
			delAll() {
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							Vue.set(food, 'count',0);
						}
					});
				});
			},
			//获取购物车所有数据
			getAllList(){
				let arr = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count > 0) {
							arr.push(food);
						}
					});
				});
				return arr;
			},
			// 结算
			settlement(){
				this.$emit('settlement',this.getAllList(),this.goods);
			},
			//点击商品
			onClick(item) {
				this.$emit('click',item)
			}
		}
	}
</script>

<style scoped lang="scss">
	// 内容
	.sl-tab-list-body{
		display: -webkit-box; 
		display: -webkit-flex; 
		display: flex;
		background:#ffffff;
		height:100%;
		width:100%;
		background: #ffffff;
		overflow: hidden;
		position: relative; 
	}
	.menu-wrapper{
		text-align: center;
		width: 22%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #F4F4F4;
		overflow: auto;
		.current {
			position: relative;
			z-index: 0;
			background-color: #fff;
			color: $base-color;
		}
		.menu-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50px;
			border-bottom: 1px solid #eaeaea;
			font-size: $uni-font-size-base;
		}
		.allcount {
			position: absolute;
			right: 6px;
			top: 8px;
			display: inline-block;
			font-size: 9px;
			line-height: 16px;
			font-weight: 400;
			border-radius: 50%;
			background-color: #f01414;
			color: #ffffff;
			text-align: center;
			width: 15px;
		}
	}
	.foods-wrapper{
		padding-left: 7px;
		width: 78%;
		height: 100%;
		overflow: auto;
		.food, .content {
			display: flex;
			flex-direction: row;
		}
		.food-title {
			padding: 2px 0;
			font-size: $uni-font-size-base;
		}
		.food{
			padding:8px 0;
			border-bottom: 1px solid #e8e8e8;
		}
		.food-image{
			min-width: 90px;
			width: 90px;
			height: 90px;
		}
		.food-info {
			margin-left: 10px;
			margin-right: 16px;
			display: flex;
			flex-direction: column;
			flex: 2;
		}
		.food-price {
			color: #f01414;
			font-size: 16px;
		}
		.food-primeCost {
			font-size: 12px;
			text-decoration:line-through;
			margin-left: 3px;
			color: #9e9e9e;
			line-height: 28px;
		}
		.fracture,.reduce{
			font-size: 12px;
			color:#eaa753;
			line-height: 16px;
		}
		.fracture .icon,.reduce .icon{
			padding: 0 2px;
			background: #efbb7a;
			color: #ffffff;
			border-radius: 3px;
			font-size: 10px;
			line-height: 0;
			margin-right: 5px;
		}
		.reduce{
			color:#f56b36;
		}
		.reduce .icon{
			background: #f56b36;
		}
	}
	.shopcart{
		position: absolute;
		bottom: 0;
		width:100%;
	}
</style>